import React, { useEffect } from 'react';
import useHoxModel from '../../useHoxModel';
import { Row, Col } from 'antd';
import styles from './index.less';
import { sumBy } from 'lodash';
import bg from '@/assets/index-status-bg.png';

const DemoStackedArea: React.FC = () => {
  const { getOpenRecordPie, openRecordPie = [] } = useHoxModel((model) => [
    model.openRecordPie,
    model.openRecordPieLoading,
  ]);
  useEffect(() => {
    getOpenRecordPie();
  }, []);
  const result: any[][] = openRecordPie.reduce((pre: any[], item: any, index: number) => {
    const currentIndex = Math.floor(index / 2);
    if (pre[currentIndex]) {
      pre[currentIndex].push(item);
    } else {
      pre[currentIndex] = [item];
    }
    return pre;
  }, []);
  const sum = sumBy(openRecordPie, function (o: { count: number }) {
    return o.count;
  });
  let faceRecognition = openRecordPie.filter((item: { openType: string }) => {
    return item.openType === '人脸识别';
  });

  return (
    <div className={styles['open-door-statistics-wrap']}>
      <div className={styles['big-title']}>开门统计</div>
      <div className={styles['percentage-faces']}>
        <div className={styles['bg']}>
          <img src={bg} />
          <div className={styles['center']}>
            <span className={styles['value']}>
              {faceRecognition[0] ? ((faceRecognition[0].count / sum) * 100).toFixed(2) : 0}
            </span>
            <span className={styles['percentage']}>%</span>
            <div className={styles['title']}>
              {(faceRecognition[0] && faceRecognition[0].openType) || ''}
            </div>
          </div>
        </div>
      </div>
      <div className={styles['door-type-statistics']}>
        {result.map((array: any[], arrayIndex: number) => {
          return (
            <Row key={arrayIndex.toString(36) + arrayIndex} style={{ flex: 1 }}>
              {array.map((item: { openType: string; count: number }, index: number) => {
                return (
                  <Col span={12} key={index.toString(36) + index} style={{ margin: 'auto 0' }}>
                    <div>
                      <span className={styles['title']}>{item.openType}</span>
                      <span className={styles['value']}>{item.count}</span>
                    </div>
                  </Col>
                );
              })}
            </Row>
          );
        })}
      </div>
    </div>
  );
};

export default DemoStackedArea;
